<template>
  <div class="conLayout cf search rConlNav">
    <!--搜索有结果左侧 开始-->
    <div class="conLeft fl">
      <div class="layout_h1">
        <h1>
          找到 {{number}} 条符合<span class="sBookName">方法论（最经典英语文库）</span
          >条件的作品
        </h1>
      </div>
      <ul class="sResult">
        <li v-for="(item,i) of books" :key="i">
          <div class="cf">
            <a
              href="index.php?ca=bookdetail.index&amp;bid=11387801"
              class="cover w_104 fl"
            >
              <img
                src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/051e0988/group6/M00/8C/45/CmQUNllPJsiEB6l4AAAAAJzWo2Y152898784.jpg?v=MTRtZRjQ&amp;t=CmQUNllPJsw."
              />
            </a>
            <div class="bookMess fr">
              <a href="index.php?ca=bookdetail.index&amp;bid=11387801">
                <h3>{{item.title}}</h3>
              </a>
              <p class="author">
                作者：{{item.author}}
                <var>
                  <strong></strong>
                </var>
                <!--<a href="javascript:(void)" bid="11387801" class="buy buyBtn">购 买</a>-->
              </p>
              <p class="brief">
                {{item.brief}}
              </p>
            </div>
          </div>
        </li>
        
        
        
        
      </ul>
      <!--公共分页-->
      <div class="page">
        <button>上一页</button>
        {{number}} 条记录 1/{{number}} 页
        <button>下一页</button>
      </div>
    </div>
    <!--搜索有结果左侧 结束-->

    <!--搜索有结果右侧 开始-->
    <div class="conRight fr">
      <div class="searchRank">
        <div class="layout_h1">
          <h1>搜索排行</h1>
        </div>
        <ul>
          <li class="posr cf">
            <a
              target="_blank"
              href="index.php?ca=bookdetail.index&amp;bid=10873595"
              class="w_104 fl"
            >
              <img
                src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/99a704bb/group6/M00/7E/5C/CmQUOFjdKZ2EdMkHAAAAAMQytpo613382622.jpg?v=zpJmBfrs&amp;t=CmQUN16IsT8."
              />
            </a>
            <div class="bookMess fr">
              <a
                target="_blank"
                href="index.php?ca=bookdetail.index&amp;bid=10873595"
              >
                <h3>医妃权倾天下</h3>
              </a>
              <p class="author">作者：承九</p>
              <p>字数：221.2万字</p>
              <var>
                <strong></strong>
              </var>
              <!--<a href="javascript:void(0)" bid="10873595" class="buy buyBtn">购 买</a>-->
            </div>
          </li>
          <li class="posr cf">
            <a
              target="_blank"
              href="index.php?ca=bookdetail.index&amp;bid=11266402"
              class="w_104 fl"
            >
              <img
                src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/7a25c27a/group6/M00/D0/E1/CmQUNljdCSeEXipHAAAAAFq1unM312123656.jpg?v=EJPBBHLJ&amp;t=CmQUNl6Itp4."
              />
            </a>
            <div class="bookMess fr">
              <a
                target="_blank"
                href="index.php?ca=bookdetail.index&amp;bid=11266402"
              >
                <h3>逍遥游</h3>
              </a>
              <p class="author">作者：月关</p>
              <p>字数：201.7万字</p>
              <var>
                <strong></strong>
              </var>
              <!--<a href="javascript:void(0)" bid="11266402" class="buy buyBtn">购 买</a>-->
            </div>
          </li>
          <li class="posr cf">
            <a
              target="_blank"
              href="index.php?ca=bookdetail.index&amp;bid=10945727"
              class="w_104 fl"
            >
              <img
                src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/086a8fe5/group6/M00/44/93/CmRaIVjdHpaEDFLdAAAAANK4f0s923282017.jpg?v=5gaAEePn&amp;t=CmQUNl6Islo."
              />
            </a>
            <div class="bookMess fr">
              <a
                target="_blank"
                href="index.php?ca=bookdetail.index&amp;bid=10945727"
              >
                <h3>绝世战魂</h3>
              </a>
              <p class="author">作者：极品妖孽</p>
              <p>字数：667万字</p>
              <var>
                <strong></strong>
              </var>
              <!--<a href="javascript:void(0)" bid="10945727" class="buy buyBtn">购 买</a>-->
            </div>
          </li>
          <li class="posr cf">
            <a
              target="_blank"
              href="index.php?ca=bookdetail.index&amp;bid=10909586"
              class="w_104 fl"
            >
              <img
                src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/911052c6/group6/M00/D4/77/CmQUN1jdJDKEXQaHAAAAAEAgwIM890212694.jpg?v=ZQJA5GmJ&amp;t=CmQUN16Isa8."
              />
            </a>
            <div class="bookMess fr">
              <a
                target="_blank"
                href="index.php?ca=bookdetail.index&amp;bid=10909586"
              >
                <h3>总裁在上（电视剧名一念时...</h3>
              </a>
              <p class="author">作者：姜小牙</p>
              <p>字数：362.9万字</p>
              <var>
                <strong></strong>
              </var>
              <!--<a href="javascript:void(0)" bid="10909586" class="buy buyBtn">购 买</a>-->
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--搜索有结果右侧 结束-->
  </div>
</template>
<script>
export default {
  data(){
    return{
      books:[],
      number:1
    }
  },
  mounted(){
    var title=this.$route.query.title;
    console.log(title)
    this.axios.get(`/search/tit?title=${title}`).then(result=>{
      console.log(result.data)
      this.books=result.data;
      this.number=result.data.length;
    })
  }
}
</script>
<style scoped>
.fr {
    float: right;
}
.rConlNav .conLeft {
    width: 688px;
}
.conLeft {
    width: 213px;
    margin-left: 11px;
    display: inline;
}
.fl {
    float: left;
}
.conLayout {
    padding-top: 22px;
    font-family: 微软雅黑;
    width: 934px;
    margin: 0px auto;
}
.cover {
    padding: 6px 10px 15px 11px;
    display: inline-block;
}
.w_104 img {
    width: 104px;
    height: 138px;
    box-shadow: 0px 2px 8px #cccccc;
}
.search .conLeft .sResult .bookMess {
    width: 537px;
}
.rConlNav .bookMess {
    margin-left: 0;
}
.bookMess {
    margin-left: 8px;
}
.cf:after{
clear: both;
}

.cf:after, .layout:after, .cf:before, .layout:before {
    display: table;
    content: "";
    line-height: 0;
}
.search .conLeft .sResult li {
    border-bottom: 1px dotted #ccc;
    padding: 28px 9px 16px;
}
.page {
    margin: 22px 0 15px 0;
}
.page {
    text-align: center;
    margin: 32px 0 20px;
    height: 30px;
    line-height: 30px;
}
.rConlNav .conRight ul{
  padding: 20px 0 33px;
}
.rConlNav .conRight img {
    border: 1px solid #d1d1d1;
    width: 89px;
    height: 128px;
    margin: 0 11px 0 7px;
    box-shadow: 0px 2px 8px #cccccc;
}
.rConlNav .conRight .bookMess {
    /* padding-top: 5px; */
    width: 112px;
}
.rConlNav .bookMess {
    margin-left: 0;
}
.bookMess {
    margin-left: 8px;
}
.fr {
    float: right;
}
.rConlNav .conRight li {
    margin-bottom: 28px;
}
.search .conLeft .sResult li {
    border-bottom: 1px dotted #ccc;
    padding: 28px 9px 16px;
}
.layout_h1 {
    border-bottom: 2px solid #ee7700;
    margin-bottom: 15px;
}
h1 {
    color: #383b43;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
}
var, em, h2, h1, h3 {
    font-style: normal;
    font-weight: normal;
}
.bookMess h3{
  font-weight: normal;
}
.rConlNav .conRight .bookMess h3 {
    margin-bottom: 7px;
    font-weight: normal;
}
.rConlNav .bookMess h3 {
    margin-bottom: 10px;
}
.bookMess h3 {
    font-weight: normal;
    line-height: 18px;
    font-size: 14px;
}
.search .conLeft .bookMess h3 {
    font-size: 18px;
    margin-top: 10px;
}
.rConlNav .bookMess h3 {
    margin-bottom: 10px;
}
.bookMess h3 {
    /* font-weight: normal; */
    line-height: 18px;
    font-size: 14px;
}
var, em, h2, h1, h3 {
    font-style: normal;
    font-weight: normal;
}
a{
  color: black;
}
.search p.author {
    line-height: 26px;
    margin:0px 0px 8px;
}

.bookMess p {
    margin-top: 5px;
    color: #999;
    font-size: 12px;
}
.search p.brief {
    color: #666;
    line-height: 20px;
    margin-top: 20px;
    height: 60px;
    overflow: hidden;
}

</style>